<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <title>Title</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
<script>
  layui.use(['table','layer', 'form', 'upload', 'laydate'], function(){
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var upload = layui.upload;
    var laydate = layui.laydate;
    // 渲染
    laydate.render({
      elem: '#beginCreateTime',
      type: 'datetime'
    });
    laydate.render({
      elem: '#endCreateTime',
      type: 'datetime'
    });

    // 渲染
    upload.render({
      elem: '#importExcel', // 绑定多个元素
      url: '/admin?method=importExcel', // 此处配置你自己的上传接口即可
      accept: 'file', // 普通文件
      done: function(res){
        layer.msg('上传成功');
        console.log(res);
      }
    });

    table.render({
      elem: '#tableId',
      url:'/admin/selectByPage',
      toolbar: '#toolbarDemo',
      cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field:'id', title: 'ID', sort: true},
          {field:'name', title: '博客名'},
          {field:'role', title: '角色'},
          {field:'email', title: '邮箱'},
          {field:'phone', title: '电话'},
          {field:'image', title: '头像', templet:'#imageTemplet'},
          {field:'status', title: '状态', templet:'#statusTemplet'},
          {field:'createTime', title: '创建时间'},
          {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
        ]
      ],
      page: true
    });

    // 搜索提交
    form.on('submit(submitSearch)', function(data){

      var field = data.field; // 获得表单字段
      // 执行搜索重载
      //http://localhost:8081/admin?method=selectByPage&page=1&limit=10&name=Java&credit=3
      table.reload('tableId', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
      });

      return false; // 阻止默认 form 跳转
    });

    // 触发单元格工具事件
    table.on('tool(tableId)', function(obj){ // 双击 toolDouble
      var data = obj.data; // 获得当前行数据
      // {id:12,name:'Java',credit:3}
      console.log(data);
      // console.log(obj)
      if(obj.event === 'update'){
        layer.open({
          type: 2,
          title: '编辑数据',
          area: ['90%', '90%'],
          content: '/page/admin/update?id=' + data.id
        });
      } else if(obj.event === 'deleteById'){
        layer.confirm('您确认要删除么?', function () {
          $.post(
                  '/admin?method=deleteById',
                  {'id': data.id},
                  function (result) {
                    console.log(result);
                    if (result.code == 0) {
                      mylayer.okMsg(result.msg);
                      //删除数据之后刷新表格，展示最新数据
                      table.reload('tableId');
                    } else {
                      mylayer.errorMsg(result.msg);
                    }
                  },
                  'json'
          );
        });
      } else if (obj.event == 'content') {
        layer.open({
          type: 1,
          title: data.name,
          area: ['90%', '90%'],
          content: data.content
        });
      }
    });

    // 头部工具栏事件
    table.on('toolbar(tableId)', function(obj){
      var options = obj.config; // 获取当前表格属性配置项
      var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
      console.log(obj); // 查看对象所有成员


      // 根据不同的事件名进行相应的操作
      switch(obj.event){ // 对应模板元素中的 lay-event 属性值
        case 'exportExcel':
          location.href = '/admin?method=exportExcel';
          break;
        case "importExcel":
          $('#importExcel').click();
          break
        case 'add':
          layer.open({
            type: 2,
            title: '添加数据',
            area: ['90%', '90%'],
            content: '/page/admin/add'
          });
          break;
        case 'deleteAll':
          var data = checkStatus.data;
          //[{id: 1, name: 'Java', credit: 5}, {…}]
          var ids = new Array();
          $(data).each(function () {
            ids.push(this.id);
          })
          //[2,3]
          layer.confirm('您确认要删除么?', function () {
            $.post(
                    '/admin?method=deleteAll',
                    {'ids': ids},
                    function (result) {
                      console.log(result);
                      if (result.code == 0) {
                        mylayer.okMsg(result.msg);
                        //删除数据之后刷新表格，展示最新数据
                        table.reload('tableId');
                      } else {
                        mylayer.errorMsg(result.msg);
                      }
                    },
                    'json'
            );
          });
          break;
      };
    });

  });
</script>
</body>
</html>